<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link href="./lib/bootstrap-3.3.7.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">

            
            <div class="panel panel-primary">
                  <div class="panel-heading">
                        <h3 class="panel-title">添加品牌</h3>
                  </div>
                  <div class="panel-body form-inline">
                       
                        <label>
                                name
                                <input type="text" v-model="name" class="form-control">
                            </label>
                            
                            <button @click="add" class="btn btn-primary">
                                添加
                            </button>
                            
                            <button  class="btn btn-primary">
                                    删除
                                </button>
                  </div>
            </div>
            
            
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>time</th>
                        <th>op</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <a href="" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            


        </div>
        <script>
            // 全局根域名 下面使用别带斜线
            Vue.http.options.root ="http://www.liulongbin.top:3005/";
            
            Vue.http.options.emulateJSON = true;

            var vm =new Vue({
                el: '#app',
                data: {
                    name: "",
                    list: [
                        {id: 1, name: '宝马', time: new Date()},
                        {id: 2, name: '众泰', ctime: new Date()},
                    ]
                },
                created() {
                    // 当vm实例的data和method初始好了之后 vm会自动执行这个生命周期函数
                    this.getList()
                },
                methods:{
                    
                    getList(){
                        this.$http.get('api/getprodlist').then(result => {
                            var result = result.body
                            if (result.status === 0) {
                                this.list = result.message
                            } else {
                                alert("获取失败")
                            }
                        })
                    },
                    add() {
                        this.$http.post('api/addproduct', {name: this.name}).then(result => {
                            if (result.body.status === 0) {
                                // 添加完成后 只需要手动在调用一下 getlist 就能刷新品牌列表 
                                this.getList()
                                this.name=""
                            } else {
                                alert('添加失败')
                            }
                        })
                    },

                    del(id) {
                        this.$http.get('api/delproduct/'+ id).then(result => {
                            if (result.body.status === 0) {
                                this.getList()
                            } else {
                                alert('删除失败')
                            }
                        })
                    },









                }
            })
        </script>
    </body>
</html>